package org.malred.jetpackcomposebasic

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.malred.jetpackcomposebasic.ui.theme.JetpackComposeBasicTheme
import java.text.SimpleDateFormat

class MainActivity05 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 基本主题, 可以使用它的深色主题
            JetpackComposeBasicTheme {
//                MessageCard(Message("androdid", "jetpack compose"))
                Conversation(SimpleData.conversationSample)
            }
        }
    }

    @Composable // compose 控件
    fun MessageCard(msg: Message) {
        Row(
            modifier = Modifier
                .padding(all = 8.dp)
//                .background(Color.Green),
                .background(MaterialTheme.colorScheme.background),
        ) {
            Image(
                painter = painterResource(id = R.drawable.test),
                // 无障碍模式下, 会语言读出这个描述文本
                contentDescription = null,
                // 图片描述
                modifier = Modifier
                    .size(40.dp)
                    // 裁剪
                    .clip(CircleShape)
            )
            Spacer(modifier = Modifier.width(8.dp))
            // 给compose存变量 isExpanded
            var isExpanded by remember { // by -> 委托
                // 可变状态对象
                mutableStateOf(false)
            }
            // 颜色 动画状态
            val surfaceColor: Color by animateColorAsState(
                // 从primary颜色转换到surface 或 反向切换
                if (isExpanded) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surface
            )
            // column: vertical垂直排列
            Column(
                // 点击column后改变isExpanded的值
                modifier = Modifier.clickable { isExpanded = !isExpanded }
            ) {
                // compose: 文本控件
                Text(
                    text = msg.author,
                    color = MaterialTheme.colorScheme.secondary
                )
                // 间距
                Spacer(modifier = Modifier.height(4.dp))
                // 使用动画
                Surface(
                    // 圆角
                    shape = MaterialTheme.shapes.medium,
                    // 阴影
                    shadowElevation = 1.dp,
                    color = surfaceColor,
                    modifier = Modifier
                        .animateContentSize()
                        .padding(1.dp)
                ) {
                    Text(
                        text = msg.body,
                        modifier = Modifier.padding(all = 4.dp),
                        style = MaterialTheme.typography.bodyMedium,
                        // 如果isExpanded为true, 就展开body
                        maxLines = if (isExpanded) Int.MAX_VALUE else 1 // 最大显示函数
                    )
                }
            }
        }
    }

    @Composable
    fun Conversation(message: List<Message>) {
        // 带缓冲 list view
        LazyColumn {
            // 从list取出数据, 放入message card, 然后返回
            items(message) { message ->
                MessageCard(message)
            }
        }
    }
}
